//获取imgList
let imgList = document.getElementById("imgList");

//获取页面中所有的img标签
let imgArr = imgList.getElementsByTagName("img");

//设置imgList的宽度
imgList.style.width = 540 * imgArr.length + "px";


/* 设置导航按钮居中 */
//获取imgDiv
let imgDiv = document.getElementById("imgDiv");

//获取focus
let focus = document.getElementById("focus");

//设置navDiv的left值
//navDiv.style.left = (focus.offsetWidth - navDiv.offsetWidth) / 2 + "px";

//获取所有的a
let allA = focus.getElementsByTagName("a");

//默认显示的索引
let index = 0

// 设置第一个a的样式
allA[index].style.backgroundColor = "black";

/* 
    点击超链接切换到指定的图片
        点击第一个超链接, 显示第一个图片
        点击第二个超链接, 显示第二个图片
*/
//为所有的超链接都绑定i单击响应函数
for(let i=0; i<allA.length; i++){

    //为每一个超链接都绑定一个num属性
    allA[i].num = i;

    //为超链接绑定单击响应函数
    allA[i].onclick = function(){
        
        //关闭自动切换的定时器
        clearInterval(timer);

        //获取点击超链接的索引
        index = this.num;

        //切换图片
        /**
         *  第一张 0 0
         *  第二张 1 -520
         *  第三张 2 -1040 
         */
        // imgList.style.left = -520 * index + "px";
        //设置选中的a
        setA();

        //使用move函数来切换图片
        move(imgList, "left", -540*index, 20, function(){
            //动画执行完毕, 开启自动切换
            autoChange();
        });
    };
}

//自动切换图片
autoChange();


//创建一个方法用来设置选中的a
function setA(){

    //判断当前索引是否是最后一张图片
    if(index >= imgArr.length - 1){
        // 则将index设置为0
        index = 0;

        //此时显示的最后一张图片, 而最后一张图片和第一张是一模一样的
        //通过CSS将最后一张图片切换成第一张
        imgList.style.left = 0;
    }

    //遍历所有的a并将他们的背景颜色设置为红色
    for(let i=0; i<allA.length; i++){
        allA[i].style.backgroundColor = "red";
    }

    //将选中的a设置为黑色
    allA[index].style.backgroundColor = "black";
};

//定义一个自动切换的定时器的标识
var timer;


//创建一个函数, 用来开启自动切换图片
function autoChange(){

    
    // 开启一个定时器, 用来定时去切换图片
    timer = setInterval(function(){

        // 使索引自增
        index++

        //判断index的值
        index %= imgArr.length;

        //执行动画, 切换图片
        move(imgList, "left", -520*index, 20, function(){

            //设置导航按钮
            setA();

        });

    }, 3000);

};